<!--
 * @description 人物列表组件
 * @date 2022/11/12
 -->
<template>
  <div class="figure-list-style-one-comp">
    <section class="main-list" :style="{ 'margin-top': top, }">
      <van-pull-refresh
        id="craftsmanList"
        v-model="isLoading"
        :style="{
          height: '88vh'
        }"
        @refresh="refresh4other"
      >
        <van-list v-model="loading" :finished="finished" :finished-text="finishedText" :immediate-check="false" :offset="20" @load="onLoad">
          <ul class="out-container">
            <li v-for="(item, index) in list" :key="index" class="inner-item" @click="toDetail(item)">
              <van-image class="craftsman-cover" :src="setImgPath(item.cover, item.coverUrl, 1)" :fit="imgType">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>
                  <img src="../../images/base/default-placeholder.png" alt>
                </template>
              </van-image>
              <section class="craftsman-info">
                <p class="info-item etc">{{ item.name }}</p>
                <p class="info-item etc">{{ classifyName }}</p>
                <p class="info-item etc">{{ item.synopsis }}</p>
              </section>
            </li>
          </ul>
        </van-list>
      </van-pull-refresh>
    </section>
  </div>
</template>

<script>

import mixins from '@/components/CustomPage/apps/widget/mixins'

export default {
  name: 'FigureListStyleOneComp',
  mixins: [mixins],
  inject: ['footerHeight', 'headerHeight'],
  props: {
    option: {
      type: Object,
      default: {}
    },
    varInfo: {
      type: Object,
      default: () => { }
    },
    relation: {
      type: [Object, undefined],
      default: () => {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      isLoading: false,
      finishedText: '',
      classifyName: '',
      page: 1,
      origin: '',
      classifyId: ''
    }
  },
  created() {
    if (this.isInitData) {
      this.getList()
      this.origin = this.varInfo['${route|o}']
      this.classifyId = this.varInfo['${route|ci}']
    } else {
      this.list = [
        {
          'id': 'Z1273796867422085121',
          'name': '姓名',
          'craftsmanType': 'RWFL_DAS',
          'sex': '',
          'birthday': '',
          'politicCountenance': '',
          'deptName': '',
          'profession': '',
          'nationality': '中国',
          'areaProvince': '',
          'areaProvinceName': '广东省',
          'areaCity': '',
          'areaCityName': '',
          'cover': '',
          'coverUrl': '',
          'slogan': '“中国高度”背后的“钢铁侠”',
          'synopsis': '中建钢构有限公司华南大区总工程师、一级建造师、金牌项目经理。铸钢件焊接技术被评为世界先进技术。曾参与过20座国内知名地标性建筑的建设。',
          'labels': [],
          'labelsValue': '',
          'classifyId': ['Z1266986914096594945'],
          'publishStatus': 'GIPSTSTUS01',
          'isTop': 0,
          'bid': '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
        }, {
          'id': 'Z1273806631640162306',
          'name': '姓名',
          'craftsmanType': 'RWFL_DAS',
          'sex': '',
          'birthday': '',
          'politicCountenance': '',
          'deptName': '',
          'profession': '',
          'nationality': '中国',
          'areaProvince': '',
          'areaProvinceName': '广东省',
          'areaCity': '',
          'areaCityName': '',
          'cover': '',
          'coverUrl': '',
          'slogan': '维修能手41年为公司省500万元',
          'synopsis': '广州港股份有限公司黄埔港务分公司高级技师。先后获得广东省技术能手、交通部全国交通技术能手、全国海员总工会第九届"金锚奖”、广州市劳动模范、广东省劳动模范、全国技术能手等荣誉称号。41年间为公司节约资金500万元。',
          'labels': [],
          'labelsValue': '',
          'classifyId': ['Z1266986914096594945'],
          'publishStatus': 'GIPSTSTUS01',
          'isTop': 0,
          'bid': '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
        },]
    }
  },
  methods: {
    /**
     * 用于initData方法调用完设置数据
     */
    setData(result) {
      this.finished = false
      const { dataList4Company, dataList4SAAS } = result
      const res = dataList4Company || dataList4SAAS
      const { rows, total } = res.data || {}
      this.list.push(...rows)
      this.isNoData = total < 1
      if (this.isNoData) {
        this.finishedText = ''
      } else {
        this.finishedText = '已经到底了'
      }
      if (this.list.length >= total) {
        this.finished = true
      } else {
        this.finished = false
      }
    },
    /**
     * 刷新
     */
    refresh4other() {
      return new Promise((sesolve, reject) => {
        this.finished = true
        this.page = 1
        this.list = []
        this.origin === 'saas' ? this.getDataByCode('dataList4SAAS') : this.getDataByCode('dataList4Company')
        return new Promise(() => {})
      })
    },
    /**
     * 获取列表
     */
    getList() {
      if (this.origin === 'saas') {
        this.getDataByCode('dataList4SAAS')
      } else {
        this.getDataByCode('dataList4Company')
      }
    },
    /**
     * 加载更多
     */
    onLoad() {
      if (!this.isLoading) {
        this.page += 1
        this.origin === 'saas' ? this.getDataByCode('dataList4SAAS') : this.getDataByCode('dataList4Company')
      } else {
        this.loading = false
      }
    }
  }
}
</script>

<style  lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.figure-list-style-one-comp{
  width: rem(750);
  position: relative;
  p{
    padding: 0;
    margin:0;
  }

    .main-list {
      width: rem(750);
      position: relative;
      height: 100%;
      .van-pull-refresh {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        background-color: #f7f8f9;
        .out-container {
          padding: rem(20) rem(24);
          .inner-item{
            border-radius: rem(16);
            display: flex;
            margin-bottom: rem(20);
            padding: rem(20);
            background-color: #fff;
            .craftsman-cover {
              flex: 0 0 auto;
              width: rem(240);
              height: auto;
              margin-right: rem(20);
              .van-image, img {
                width: 100%;
                height: 100%;
                border-radius: rem(12);
              }
              .van-image__error{
                > img {
                  width: rem(120);
                  height: rem(120);
                }
              }
            }
            .craftsman-info {
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              padding-top: rem(24);
              >p {
                width: rem(360);
                &:first-child {
                  color: #333;
                  font-size: rem(30);
                  font-weight: bold;
                }
                &:nth-child(2) {
                  color: #333;
                  font-size: rem(26);
                  font-weight: bold;
                }
                &:nth-child(3) {
                  color: #666;
                  font-size: rem(24);
                }
                &:nth-child(4) {
                  color: #999;
                  font-size: rem(24);
                }
              }
            }
          }
        }
      }
    }
}

</style>
